<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>奶龙AI</title>
    <link rel="stylesheet" href="./单人换脸.css">
</head>

<body>
    <!-- 导航栏 -->
    <div class="header w">
        <div class="logo">
            <img src="../images/R-C.png" alt="">
        </div>
        <div class="nav">
            <ul>
                <li>
                    <img src="../images/one.png" alt="">
                    <a href="./单人换脸.html">单人换脸</a>
                </li>
                <li>
                    <img src="../images/two.png" alt="">
                    <a href="https://www.yuanshen.com/#/">多人换脸</a>
                </li>
                <li>
                    <img src="../images/vidio3.png" alt="">
                    <a href="./视频换脸.html" target="_blank">视频换脸</a>
                </li>
            </ul>
        </div>
        <!-- 语言切换 -->
        <!-- <div class="language">
            <img src="../images/language.png" alt="">
            <form class="dropbtn">
                <select class="dropdown-content">
                    <option>中文</option>
                    <option>English</option>
                </select>
            </form>
        </div> -->

        <!-- 登录按钮 -->
        <button id="loginButton">登录</button>

        <!-- 登录弹窗 -->
        <div id="loginModal" class="modal">
            <div class="modal-content">
                <span class="close">&times;</span>
                <h2>登录</h2>
                <form>
                    <label for="username">用户名:</label>
                    <input type="text" id="username" name="username"><br><br>
                    <label for="password">密码:</label>
                    <div class="password-input">
                        <input type="password" id="password" name="password">
                        <i class="toggle-password fa-solid fa-eye" aria-hidden="true"></i>
                    </div>
                    <a href="#" class="forgot-password">忘记密码</a><br><br>
                    <input type="submit" value="登录">
                </form>
                <a href="#" class="register-link">没有账号？注册</a>
            </div>
        </div>
        <script src="https://kit.fontawesome.com/5ba854c8bd.js" crossorigin="anonymous"></script>
        <script>
            // 获取登录按钮、弹窗和关闭按钮的元素
            const loginButton = document.getElementById('loginButton');
            const modal = document.getElementById('loginModal');
            const closeButton = document.querySelector('.close');

            // 为登录按钮添加点击事件监听器，点击时显示弹窗
            loginButton.addEventListener('click', function () {
                modal.style.display = 'flex';
            });

            // 为关闭按钮添加点击事件监听器，点击时隐藏弹窗
            closeButton.addEventListener('click', function () {
                modal.style.display = 'none';
            });

            // 点击弹窗外部区域也可以关闭弹窗
            window.addEventListener('click', function (event) {
                if (event.target === modal) {
                    modal.style.display = 'none';
                }
            });

            // 小眼睛切换密码可见性功能
            const togglePassword = document.querySelector('.toggle-password');
            const passwordInput = document.getElementById('password');

            togglePassword.addEventListener('click', function () {
                const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                passwordInput.setAttribute('type', type);
                this.classList.toggle('fa-eye');
                this.classList.toggle('fa-eye-slash');
            });
        </script>
    </div>
    <!-- 标题部分 -->
    <div class="g-container">
        <p class="biaoti">奶龙 AI</p>
    </div>

    <!-- 主体部分 -->
    <div class="main">
        <div class="first">
            <div class="oldPicture">
                <img src="../images/replace.png" alt="">
                <p>上传原图</p>
                <form action="upload.php" method="post" enctype="multipart/form-data">
                    <!-- input 标签的 type 属性为 file 用于选择文件 -->
                    <input class="chose1" type="file" name="fileToUpload" id="fileToUpload">
                    <input class="chose2" type="submit" value="上传" name="submit">

            </div>

        </div>
        <div class="second">
            <div class="newPicture">
                <img src="../images/object.png" alt="">
                <p>上传替换图</p>
                <form action="upload.php" method="post" enctype="multipart/form-data">
                    <!-- input 标签的 type 属性为 file 用于选择文件 -->
                    <input class="chose3" type="file" name="fileToUpload" id="fileToUpload">
                    <input class="chose4" type="submit" value="上传" name="submit">

            </div>

        </div>
    </div>
    <!-- 开始部分 -->
    <!-- From Uiverse.io by elijahgummer -->
    <div class="start">
        <button class="button-with-icon">
            <svg class="icon" id="Play" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
                <path class="color000000 svgShape" fill="#ffffff"
                    d="M12 39c-.549 0-1.095-.15-1.578-.447A3.008 3.008 0 0 1 9 36V12c0-1.041.54-2.007 1.422-2.553a3.014 3.014 0 0 1 2.919-.132l24 12a3.003 3.003 0 0 1 0 5.37l-24 12c-.42.21-.885.315-1.341.315z">
                </path>
            </svg>
            <span class="text">开始</span>
        </button>
    </div>






</body>

</html>